<template>
    <!--按门查询进出记录-->
    <div class="components-layout-demo">
        <a-layout style="height:100%">
            <a-layout style="background: #fff;height:100%">
                <a-layout-sider class="layout-sider-left">
                    <div style="height:100%;">
                        <sidebar-check-door
                                :placeTree="placeTree"
                                :placeChecked.sync="placeCheckedLeft"
                                :doorCheck.sync="doorCheckLeft"
                                :doorBhChecked.sync="doorBhCheckedLeft"
                                @on-check="serchByChecked"
                                @on-select="serchByselected"
                                :heightTree="heightTreeLeft"
                                :heightTable="heightTableLeft"
                                :setHeight="'13px'"
                        />
                    </div>
                </a-layout-sider>
                <a-layout-content class="layoutContent">
                    <div class="components-table-demo-size" style="height:100%">
                        <!-- tools盒子 每个页面必须存在的div盒子，除了表格以外的功能都放在这个里面 -->
                        <div id="tools">
                          <div class="height8"></div>

                          <a-form layout="inline" style="text-align: left;padding: 0 10px;" :selfUpdate="true">
                            <a-form-item label="开始日期" class="marginBtm">
                              <a-date-picker
                                :disabledDate="disabledStartDate"
                                format="YYYY-MM-DD"
                                v-model="startDate"
                                placeholder="开始日期"
                                style="width: 150px;"
                                @openChange="handleStartOpenChange"
                              />
                            </a-form-item>
                            <a-form-item label="结束日期" class="marginBtm">
                              <a-date-picker
                                :disabledDate="disabledEndDate"
                                format="YYYY-MM-DD"
                                placeholder="结束日期"
                                v-model="endDate"
                                :open="endOpen"
                                style="width: 150px;"
                                @openChange="handleEndOpenChange"
                              />
                            </a-form-item>
                            <a-form-item label="类型" class="marginBtm">
                              <a-select
                                showArrow
                                mode="multiple"
                                placeholder="请选择记录类型"
                                :maxTagCount ="number"
                                style="width: 200px;"
                                @change="handleChange"
                                @popupScroll="popupScroll"
                              >
                                <a-select-option
                                  v-for="bdRecordType in bdRecordTypeList"
                                  :key="bdRecordType.recordType"
                                >{{bdRecordType.recordTypeName}}</a-select-option>
                              </a-select>
                            </a-form-item>

                            <a-form-item class="marginBtm">
                              <a-button type="primary" @click="handleQuery">
                                查询
                              </a-button>
                            </a-form-item>
                          </a-form>

                          <a-divider style="margin: 5px 0"/>

                            <!-- 功能按钮 -->
                            <div class="divPadiAlign">
                              <a-button type="primary" class="button-marin" @click="handleExport">
                                导出
                              </a-button>
                            </div>

                        </div>
                        <!-- 右侧数据表格 -->
                        <div id="tableBox" class="tableOthStyle">
                            <a-table
                                    bordered
                                    class="a-table"
                                    size="small"
                                    :columns="columnsRight"
                                    :dataSource="listRight"
                                    :loading="tableLoading"
                                    :rowKey="(record) => record.xh"
                                    :pagination="paginationRight"
                                    :scroll="{ y: yHeight,x:xWidth}"
                            />
                          <!--:customRow="clickRow"   双击行查看图片事件-->
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
        </a-layout>

      <!--导出加载中-->
      <customLoading :customVisible="spinning"></customLoading>

      <!--查看人脸照片-->
      <viewFace ref="visibleImg" :lookImg="lookImg"></viewFace>

    </div>
</template>

<script>
    import sidebarCheckDoor from "@/components/accessControlSystem/sidebarCheckDoor.vue";
    import sidebarCheckUser from "@/components/accessControlSystem/sidebarCheckUser.vue";
    import viewFace from "@/components/accessControlSystem/viewFace.vue";
    import {tableBoxHeight} from "@/api/communal";
    import dept from "@/api/accessControlSystem/dept";
    import place from "@/api/accessControlSystem/place";
    import door from "@/api/accessControlSystem/door";
    import rule from "@/api/accessControlSystem/rule";
    import standardReports from "@/api/accessControlSystem/standardReports";
    import moment from "moment";
    import cfg from "@/config/config";

    export default {
        components: {
            sidebarCheckDoor,
            sidebarCheckUser,
            viewFace
        },

        data() {
            let _this = this;
            return {
              spinning: false,
                number:1,
                startDate: moment().startOf('month'), //开始日期 条件
                endDate: moment().endOf('month').endOf('month'), //结束日期 条件
                jlType: [], //记录类型 条件
                inDoorRuleNo: 1,
                outDoorRuleNo: 1,
                bdRecordTypeList: [
                  // {recordType:1,recordTypeName:"刷卡开门" },
                  // {recordType:2,recordTypeName:"刷卡+密码开门" },
                  // {recordType:3,recordTypeName:"刷卡等待密码" },
                ], //所有记录类型

                lookImg: "",  //照片地址

                //树形结构
                deptTree: [],
                placeTree: [],

                /* 左侧 */
                heightTreeLeft: "",
                heightTableLeft: "500",
                placeCheckedLeft: [],
                placeselectedLeft: [],
                doorCheckLeft: [],
                doorBhCheckedLeft: [],

                /* 右侧  */
                yHeight: 500,
                xWidth:1200,
                pageNoRight: 1,
                pageSizeRight: 10,
                searchNameRight: "",
              tableLoading: false,
                listRight: [
                // {"ip":"规则1","userName":"郭永超","xh":"0010021",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达东门","smtDeptname":"信息系统部","userCard":"723896960","id":3938,"userNo":"8811157","jlType":1,"depName":"默认场所","mc":"规则1","userLx":1},
                // {"ip":"规则1","userName":"郭永超","xh":"0010022",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达西门","smtDeptname":"信息系统部","userCard":"723896960","id":3941,"userNo":"8811157","jlType":4,"depName":"默认场所","mc":"规则1","userLx":2},
                // {"ip":"规则1","userName":"郭永超","xh":"0010023",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达南门","smtDeptname":"信息系统部","userCard":"723896960","id":3940,"userNo":"8811157","jlType":2,"depName":"默认场所","mc":"规则1","userLx":3},
                // {"ip":"规则1","userName":"郭永超","xh":"0010024",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010025",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010026",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010027",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010028",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010031",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010032",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
                // {"ip":"规则1","userName":"郭永超","xh":"0010029",fx:"进",jlSj:"2020-12-12 9:00:00",devLb:"1","doorName":"步达北门","smtDeptname":"信息系统部","userCard":"723896960","id":3939,"userNo":"8811157","jlType":3,"depName":"默认场所","mc":"规则1","userLx":4},
              ],
             selectedXhRight: [], // Check here to configure the default column
                columnsRight: [
                  {
                    title: '序号',     //表头
                    dataIndex: 'serialNumber',   //字段名称
                    width: '50px',    //设列宽度
                    align: 'center',  //居中显示
                    fixed:true,
                    className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
                    customRender: (value, row, index) => `${(this.paginationRight.current - 1) * this.paginationRight.pageSize + index + 1}`  //设置动态序号
                  },
                    {
                        title: "工号",
                        dataIndex: "userNo",
                        align: "center",
                        width: "100px",
                      className: 'changeBack'
                    },
                    {
                        title: "姓名",
                        dataIndex: "userName",
                        align: "center",
                        width: "100px",
                      className: 'changeBack'
                    },
                    {
                        title: "卡号",
                        dataIndex: "userCard",
                        align: "center",
                        width: "110px",
                      className: 'changeBack'
                    },
                    {
                        title: "人员类型",
                        dataIndex: "userLx",
                        align: "center",
                        width: "100px",
                      className: 'changeBack'
                    },
                    {
                        title: "场所名称",
                        dataIndex: "depName",
                        align: "center",
                        width: "150px",
                      className: 'changeBack'
                    },
                    {
                        title: "设备名称",
                        dataIndex: "mc",
                        align: "center",
                        width: "180px",
                      className: 'changeBack'
                    },
                    {
                        title: "设备IP",
                        dataIndex: "ip",
                        align: "center",
                        width: "110px",
                      className: 'changeBack'
                    },
                    {
                        title: "门名称",
                        dataIndex: "doorName",
                        align: "center",
                        width: "200px",
                      className: 'changeBack'
                    },
                    {
                        title: "方向",
                        dataIndex: "fx",
                        align: "center",
                        width: "80px",
                      className: 'changeBack'
                    },
                    {
                        title: "记录类型",
                        dataIndex: "jlType",
                        align: "center",
                        width: "100px",
                      className: 'changeBack'
                    },
                    {
                        title: "进出时间",
                        dataIndex: "jlSj",
                        align: "center",
                        width: "180px",
                      className: 'changeBack'
                    },
                    {
                        title: "设备类型",
                        dataIndex: "devLb",
                        align: "center",
                        width: "110px",
                      className: 'changeBack'
                    }
                ],
                paginationRight: {
                    current: 1,
                    pageSize: 30, // 默认每页显示数量
                    total: 0, //总条数
                    showSizeChanger: true, // 显示可改变每页数量
                    pageSizeOptions: [ "20", "30", "50"], // 每页数量选项
                    showTotal: total => `共 ${total} 条数据`, // 显示总数
                    onShowSizeChange: (current, pageSize) => _this.changePage(1, pageSize), // 改变每页数量时更新显示
                    onChange: (current, pageSize) => _this.changePage(current, pageSize) //点击页码事件
                },
                loading: true,
                endOpen: false,
            };
        },
        mounted(){
            let _this = this;
            //加载树形结构数据
            dept.getTreeList().then(res => {
                _this.deptTree = res.data.result;
            });
            place.getTreeList().then(res => {
                _this.placeTree = res.data.result;
            });
            // rule.getDoorRule().then(res => {
            //     this.doorRuleList = res.result;
            // });
            // 获取记录类型
            standardReports.findBdRecordType().then(res => {
              // console.log(res)
                this.bdRecordTypeList = res.data.result;
            });
            tableBoxHeight();
            this.yHeight = tableBoxHeight();
            this.xWidth = this.columnsRight.length*120;
          // 控制表格底部边框保持在底部，而不是在半空中
          let minHeight = document.getElementsByClassName("ant-table");
          minHeight[0].style.minHeight = tableBoxHeight() + 40 + "px";

            // 计算本页面左侧高度传值给组件
            let height = window.innerHeight;
            // 减的数值具体可参考communal.js,左侧树和表格的高度
          this.heightTableLeft = String(height - 225 - 60);
          this.heightTreeLeft = "height:" + (height - 187) + "px";
        },
        methods: {
            /**
             * 右侧方法
             */
            // 分页刷新
            changePage(current, pageSize) {
                this.paginationRight.current = current;
                this.paginationRight.pageSize = pageSize;
                this.getPressDoorQueryList();
            },
            serchByChecked(value){
                this.paginationRight.current = 1;
                this.placeCheckedLeft = value;
                this.placeselectedLeft = [];
                this.getPressDoorQueryList()

            },
            serchByselected(value){
                this.paginationRight.current = 1;
                this.placeselectedLeft = value;
                this.placeCheckedLeft = [];
                this.getPressDoorQueryList()

            },
            //日期控件需要的方法
            disabledStartDate(startDate) {
                const endDate = this.endDate;
                if (!startDate || !endDate) {
                    return false;
                }
                return startDate.valueOf() > endDate.valueOf();
            },
            disabledEndDate(endDate) {
                const startDate = this.startDate;
                if (!endDate || !startDate) {
                    return false;
                }
                return startDate.valueOf() >= endDate.valueOf();
            },
            handleStartOpenChange(open) {
                if (!open) {
                    this.endOpen = true;
                }
            },
            handleEndOpenChange(open) {
                this.endOpen = open;
            },
            getPressDoorQueryList() {
                let _this = this;
                // _this.startDate = moment(_this.startDate).format("YYYY-MM-DD");
                // _this.endDate = moment(_this.endDate).format("YYYY-MM-DD");
                let newStartDate = _this.startDate.format("YYYY-MM-DD");
                let newEndDate = _this.endDate.format("YYYY-MM-DD");
                let placeIdArr = [];
                placeIdArr = placeIdArr.concat(this.placeCheckedLeft);
                placeIdArr = placeIdArr.concat(this.placeselectedLeft);
                if (placeIdArr.join(',') == '') {
                  this.$message.warning('请勾选场所或门列表');
                  return
                }
              this.tableLoading = true;
                standardReports.getPressDoorQueryList({
                    current: _this.paginationRight.current,
                    pageSize: _this.paginationRight.pageSize,
                    startDate: newStartDate,
                    endDate: newEndDate,
                    acdepSerial: placeIdArr.join(","),
                    bh: _this.doorBhCheckedLeft.join(","),
                    jlType: _this.jlType.join(",")
                })
                    .then(res => {
                      console.log(res)
                      if (res.data.success) {
                        _this.tableLoading = false;
                        _this.selectedXhRight = [];
                        _this.paginationRight.total = res.data.result.total;
                        _this.listRight = res.data.result.records;
                      } else {
                        _this.tableLoading = false;
                        _this.$message.error(res.data.message);
                      }
                    });
            },
            // 点击导出
            handleExport() {
                if (this.placeCheckedLeft.join(',') == '') {
                  this.$message.warning('请勾选场所或门列表');
                  return
                }
              this.spinning = true;
                let parameter =
                    "?startDate=" +
                    this.startDate +
                    "&endDate=" +
                    this.endDate +
                    "&acdepSerial=" +
                    this.placeCheckedLeft.join(",") +
                    "&bh=" +
                    this.doorBhCheckedLeft.join(",") +
                    "&jlType=" +
                    this.jlType.join(",");
                window.open(
                    cfg.apiUrl + "api/report/pressDoorQueryExport" + parameter,
                    "_self"
                );
              setTimeout(()=>{
                this.spinning = false;
              },1000)
            },
            // 选中授权表格
            onChangeRight(selectKeys) {
                this.selectedXhRight = selectKeys;
            },
            // 点击搜索
            handleQuery() {
                this.getPressDoorQueryList();
            },
            handleChange(value) {
                console.log(`Selected: ${value}`);
                this.jlType = value;
            },
            popupScroll() {
                console.log("popupScroll");
            },
          // 行事件
          clickRow(record) {
            return {
              on: {
                // click: () => {
                //   // console.log("单击行: " + record)
                //   let keys = [];
                //   keys.push(record.userSerial);   //行数据一定要有唯一识别标志，否则无法选中，和表格的key一致
                //   this.selectedXhRight = keys;
                //   // console.log(this.selectedXhRight)
                // },
                dblclick: () => {
                  // console.log("双击行: " + this.selectedXhRight);
                  this.lookImg = cfg.apiUrl + record.photoPath;  //此处根据xh获取该人员的照片地址
                  this.$refs.visibleImg.open();
                },
              }
            }
          },

        }
    };
</script>

<style>

</style>
